<template>
    <view class="relative">
        <view class="blurBg"></view>
        <up-navbar title=" " :safeAreaInsetTop="true" bgColor="transparent" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback" color="#fff"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome" color="#fff"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="flex items-center px-[30rpx] py-[48rpx] relative z-10 justify-between">
            <view class="flex" @click="topage('/subPages/setting/setting')">
                <up-image :src="userInfo.avatar" width="120rpx" height="120rpx" radius="60"></up-image>
                <view class="ml-[20rpx]">
                    <view class="mb-[8rpx] text-[40rpx] text-[#fff] font-bold">{{ userInfo.nickName }}</view>
                    <view v-if="!userInfo.mobile" class="px-[20rpx] py-[8rpx] text-[#fff] text-[24rpx] border-[1rpx] border-[#fff] rounded-[30rpx]">绑定手机</view>
                    <view v-else class="text-[#fff] text-[28rpx] font-bold">{{ userInfo.mobile }}</view>
                </view>
            </view>
            <view class="flex items-center" @click="topage('/subPages/setting/setting')">
                <image src="../../static/image/setting.png" mode="scaleToFill" class="w-[48rpx] h-[48rpx] block mr-[30rpx]"/>
                <image src="../../static/image/msg.png" mode="scaleToFill" class="w-[48rpx] h-[48rpx] blcok"/>
            </view>
        </view>
        <view class="mx-[30rpx] bg-[#fff] rounded-[16rpx] mb-[16rpx]">
            <view class="px-[30rpx] pt-[30rpx] pb-[26rpx] text-[#333] text-[30rpx] font-normal">我的钱包</view>
            <view class="flex justify-evenly pb-[30rpx]">
                <view class="flex flex-col items-center justify-center" @click="topage('')">
                    <image src="../../static/image/purse.png" mode="scaleToFill" class="w-[68rpx] h-[68rpx] block mb-[2rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">钱包</view>
                </view>
                <up-line direction="col" length="40" ></up-line>
                <view class="flex flex-col items-center justify-center" @click="topage('')">
                    <image src="../../static/image/icon1.png" mode="scaleToFill" class="w-[68rpx] h-[68rpx] block mb-[2rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">浏览记录</view>
                </view>
                <up-line direction="col" length="40" ></up-line>
                <view class="flex flex-col items-center justify-center" @click="topage('')">
                    <image src="../../static/image/icon2.png" mode="scaleToFill" class="w-[68rpx] h-[68rpx] block mb-[2rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">收藏夹</view>
                </view>
                <!-- <up-line direction="col" length="40"></up-line>
                <view class="flex flex-col items-center justify-center" @click="topage('')">
                    <image src="../../static/image/icon3.png" mode="scaleToFill" class="w-[68rpx] h-[68rpx] block mb-[2rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">优惠卷</view>
                </view> -->
            </view>
        </view>
        <view class="bg-[#fff] rounded-[16rpx] mx-[24rpx] mb-[16rpx]">
            <view class="px-[30rpx] pt-[30rpx] pb-[26rpx] flex items-center justify-between">
                <view class="text-[30rpx] text-[#333] font-normal">商城订单</view>
                <view class="flex" @click="topage('/pageOrder/order/order')">
                    <view class="text-[24rpx] text-[#999] font-normal">全部订单</view>
                    <image src="../../static/image/right.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                </view>
            </view>
            <view class="px-[42rpx] flex items-center justify-between pb-[30rpx]">
                <view @click="topage(`/pageOrder/order/order?current=${1}`)">
                    <image src="../../static/image/icon4.png" mode="scaleToFill" class="w-[68rpx] h-[68rpx] block mb-[2rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">待付款</view>
                </view>
                <view @click="topage(`/pageOrder/order/order?current=${2}`)">
                    <image src="../../static/image/icon5.png" mode="scaleToFill" class="w-[68rpx] h-[68rpx] block mb-[2rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">待发货</view>
                </view>
                <view class="flex flex-col items-center" @click="topage(`/pageOrder/order/order?current=${3}`)">
                    <image src="../../static/image/icon6.png" mode="scaleToFill" class="w-[68rpx] h-[68rpx] block mb-[2rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">待收货/自提</view>
                </view>
                <view @click="topage(`/pageOrder/order/order?current=${4}`)">
                    <image src="../../static/image/icon7.png" mode="scaleToFill" class="w-[68rpx] h-[68rpx] block mb-[2rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">待评价</view>
                </view>
                <view @click="topage(`/pageOrder/order/order?current=${5}`)">
                    <image src="../../static/image/icon8.png" mode="scaleToFill" class="w-[68rpx] h-[68rpx] block mb-[2rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">售后单</view>
                </view>
            </view>
        </view>
        <view class="mx-[30rpx] mb-[16rpx]">
            <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="scaleToFill" class="rounded-[16rpx] h-[144rpx] w-[100%] block"/>
        </view>
        <view class="mx-[30rpx] bg-[#fff] rounded-[16rpx]">
            <view class="text-[30rpx] text-[#333] font-normal px-[16rpx] pt-[32rpx] mb-[30rpx]">更多工具</view>
            <view class="flex flex-wrap justify-between px-[30rpx] pb-[30rpx]">
                <view class="flex flex-col items-center" @click="topage('/pageOrder/AdvanceOrderList/AdvanceOrderList')">
                    <image src="../../static/image/icon9.png" mode="scaleToFill" class="w-[56rpx] h-[56rpx] block mb-[8rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">预约订单</view>
                </view>
                <view class="flex flex-col items-center" @click="topage('/community/ConstructionFund/ConstructionFund')">
                    <image src="../../static/image/icon10.png" mode="scaleToFill" class="w-[56rpx] h-[56rpx] block mb-[8rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">物业基金池</view>
                </view>
                <view class="flex flex-col items-center" @click="topage('/community/HeadBinding/HeadBinding')">
                    <image src="../../static/image/icon11.png" mode="scaleToFill" class="w-[56rpx] h-[56rpx] block mb-[8rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">社区团长</view>
                </view>
                <view class="flex flex-col items-center" @click="topage('/community/MerchantOrder/MerchantOrder')">
                    <image src="../../static/image/icon12.png" mode="scaleToFill" class="w-[56rpx] h-[56rpx] block mb-[8rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">商家订单</view>
                </view>
                <view class="flex flex-col items-center" @click="topage('/community/LegBinding/LegBinding')">
                    <image src="../../static/image/icon13.png" mode="scaleToFill" class="w-[56rpx] h-[56rpx] block mb-[8rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">跑腿绑定</view>
                </view>
                <view class="flex flex-col items-center" @click="topage('/subPages/orderTaking/orderTaking')">
                    <image src="../../static/image/icon13.png" mode="scaleToFill" class="w-[56rpx] h-[56rpx] block mb-[8rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">接单大厅</view>
                </view>
            </view>
            <view class="flex flex-wrap px-[30rpx]">
                <view class="flex flex-col items-center mr-[45rpx]">
                    <image src="../../static/image/icon14.png" mode="scaleToFill" class="w-[56rpx] h-[56rpx] block mb-[8rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">联系客服</view>
                </view>
                <view class="flex flex-col items-center">
                    <image src="../../static/image/icon15.png" mode="scaleToFill" class="w-[56rpx] h-[56rpx] block mb-[8rpx]"/>
                    <view class="text-[24rpx] text-[#333] font-normal">地址管理</view>
                </view>
            </view>
        </view>
		<CustomTabbar :currentIndex="4" />
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import CustomTabbar from '@/components/CustomTabbar.vue'
import { ref } from 'vue'
import { GetUserInfo } from '../../API/user'
const { goback , gohome } = useTab()
const { topage } = usePage()
const { userInfo , getUserInfo } = useUserInfo()
function useTab(){
    const goback = () => {
        uni.navigateBack()
    }
    const gohome = () => {
        uni.switchTab({
            url:'/pages/index/index'
        })
    }
    return {
        goback,
        gohome
    }
}
function useUserInfo(){
    const userInfo = ref({})
    const getUserInfo = async ()=>{
        let { data } = await GetUserInfo() 
        userInfo.value = data
    }
    return{ userInfo , getUserInfo }
}
function usePage(){
    const topage = (url)=>{
        uni.navigateTo({
            url:url
        })
    }
    return {
        topage
    }
}
onLoad( async ()=>{
    await getUserInfo()
})
</script>

<style lang="scss" scoped>
.blurBg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 488rpx;
    z-index: -1;
    background: linear-gradient( 90deg, #5578F3 0%, #69A7F6 100%);
}
</style>